<!--
 *Author：jxx
 *Date：{Date}
 *Contact：283591387@qq.com
 *业务请在@/extension/mes/mes/MaintainPlan.jsx或MaintainPlan.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
 -->
<template>
    <div class="right">
        <view-grid ref="grid" :columns="columns" :detail="detail" :details="details" :editFormFields="editFormFields"
            :editFormOptions="editFormOptions" :searchFormFields="searchFormFields"
            :searchFormOptions="searchFormOptions" :table="table" :extend="extend" :onInit="onInit" :onInited="onInited"
            :searchBefore="searchBefore" :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore"
            :rowClick="rowClick" :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter">
            <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
            <template #gridHeader>
            </template>
        </view-grid>
    </div>
    <!-- 弹出框(选择维护类型数据) -->
    <select-maintainWorkType ref="maintainWorkTypeRef"
        @onSelectMaintainWorkType="onSelectMaintainWorkType"></select-maintainWorkType>
    <!-- 选择设备 -->
    <select-device ref="deviceRef" @onSelectDevice="onSelectDevice"></select-device>
    <!-- 选择标准作业 -->
    <select-standardWork ref="standardWorkRef" @onSelectStandardWork="onSelectStandardWork"></select-standardWork>

    <!-- 1、显示引用的其他页面 -->
    <div :class="{ 'patrolWorkOrder': isPatrolHomePage }">
        <patrolWorkOrder class="patrolWorkOrder" ref="patrolWorkOrderRef"></patrolWorkOrder>
    </div>
    <div :class="{ 'maintenanceWorkOrder': isMaintenanceHomePage }">
        <maintenanceWorkOrder class="maintenanceWorkOrder" ref="maintenanceWorkOrderRef"></maintenanceWorkOrder>
    </div>
</template>
<script setup lang="jsx">

import extend from "@/extension/mes/mes/MaintainPlan.jsx";
import viewOptions from './MaintainPlan/options.js'
import SelectMaintainWorkType from './MaintainPlanSelectMaintainWorkType.vue'
import SelectDevice from './MaintainPlanSelectDevice.vue'
import SelectStandardWork from './MaintainPlanSelectStandardWork.vue'
import PatrolWorkOrder from './PatrolWorkOrder.vue'
import MaintenanceWorkOrder from './MaintenanceWorkOrder.vue'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";

const grid = ref(null);
const maintainWorkTypeRef = ref()
const deviceRef = ref()
const standardWorkRef = ref()
const patrolWorkOrderRef = ref()
const maintenanceWorkOrderRef = ref()
// 切换方法
const isPatrolHomePage = ref(true)
const isMaintenanceHomePage = ref(false)

const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())

let gridRef;//对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
    gridRef = $vm;
    //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
    //更多属性见：https://doc.volcore.xyz/docs/view-grid
    const maintainWorkTypeOption = gridRef.getFormOption("MaintainWorkTypeName");
    maintainWorkTypeOption.readonly = true;
    maintainWorkTypeOption.extra = {
        icon: 'el-icon-zoom-out', //显示图标
        text: '选择', //显示文本
        style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
        //触发事件
        click: (item) => {
            maintainWorkTypeRef.value.open();
        }
    };
    const deviceOption = gridRef.getFormOption("DeviceNumber");
    deviceOption.readonly = true;
    deviceOption.extra = {
        icon: 'el-icon-zoom-out', //显示图标
        text: '选择', //显示文本
        style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
        //触发事件
        click: (item) => {
            deviceRef.value.open();
        }
    };
    const standardWorkOption = gridRef.getFormOption("StandardWorkName");
    standardWorkOption.readonly = true;
    standardWorkOption.extra = {
        icon: 'el-icon-zoom-out', //显示图标
        text: '选择', //显示文本
        style: 'color: #3a8ee6;font-size: 13px;cursor: pointer;',
        //触发事件
        click: (item) => {
            standardWorkRef.value.open();
        }
    };
}

//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
    gridRef.buttons.splice(5, 0, {
        name: '生成保养工单', //按钮名称
        icon: 'el-icon-document', //按钮图标:组件示例->图标
        //primary、success、warning、error、info、text、danger
        type: 'primary',
        plain: true,
        onClick: () => {
            isPatrolHomePage.value = false;
            maintenanceWorkOrderAdd()
        }
    })

    gridRef.buttons.splice(6, 0, {
        name: '生成巡检工单', //按钮名称
        icon: 'el-icon-document', //按钮图标:组件示例->图标
        //primary、success、warning、error、info、text、danger
        type: 'primary',
        plain: true,
        onClick: () => {
            isMaintenanceHomePage.value = true;
            patrolWorkOrderAdd()
        }
    })
}
//选择维护类型回调
const onSelectMaintainWorkType = (rows) => {
    editFormFields.MaintainWorkTypeName = rows[0].Name;
    editFormFields.MaintainWorkTypeId = rows[0].MaintainWorkTypeId;
    //这里还可以给其他字段设置值editFormFields.字段=
}
//选择设备回调
const onSelectDevice = (rows) => {
    editFormFields.DeviceId = rows[0].DeviceId;
    editFormFields.DeviceNumber = rows[0].Code;
    editFormFields.DeviceName = rows[0].Name;
    editFormFields.DeviceSpec = rows[0].Spec;
    editFormFields.DeviceSize = rows[0].Size;
    editFormFields.DeviceClassfiyId = rows[0].DeviceClassfiyId;
    //这里还可以给其他字段设置值editFormFields.字段=
}
//选择标准作业回调
const onSelectStandardWork = (rows) => {
    editFormFields.StandardWorkId = rows[0].StandardWorkId;
    editFormFields.StandardWorkName = rows[0].BillName;
    //这里还可以给其他字段设置值editFormFields.字段=
}
//生成保养工单
const maintenanceWorkOrderAdd = () => {
    let selectRows = gridRef.getSelectRows()
    if (selectRows[0].AuditStatus == 0 || selectRows[0].AuditStatus == null) {
        proxy.$message.error("维护计划未审核！");
        return
    }
    maintenanceWorkOrderRef.value.$refs.grid.add()
}
//生成巡检工单
const patrolWorkOrderAdd = () => {
    let selectRows = gridRef.getSelectRows()
    if (selectRows[0].AuditStatus == 0 || selectRows[0].AuditStatus == null) {
        proxy.$message.error("维护计划未审核！");
        return
    }
}

const searchBefore = async (param) => {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
}
const searchAfter = async (rows, result) => {
    return true;
}
const addBefore = async (formData) => {
    //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
    return true;
}
const updateBefore = async (formData) => {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
}
const rowClick = ({ row, column, event }) => {
    //查询界面点击行事件
    grid.value.toggleRowSelection(row); //单击行时选中当前行;
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
    return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
    //弹出框打开后方法,设置表单默认值,按钮操作等
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
<style scoped lang="less">
// 5、默认隐藏引用的页面
.patrolWorkOrder ::v-deep(.layout-container) {
    display: none;
}

.maintenanceWorkOrder ::v-deep(.layout-container) {
    display: none;
}
</style>